<template>
	<view class="settleOne">
		<view class="settle-box">
			<view class="h3">交易员入驻条件</view>
			<view class="p">社区已开通交易员入驻通道，为了验证交易策略水平。满足以下条件即可入驻社区。</view>
			<view class="list">
				<view class="p">1.请选择一个合约交易类型在24小时内获利</view>
				<view class="p">2.连接成功后，获得50位社区用户支持</view>
			</view>
			<button class="flex-center" @click="showPopup = !showPopup">开始选择合约</button>
		</view>
		<!-- 筛选弹窗 -->
		<view class="popup flex" v-if="showPopup">
			<view class="box">
				<view class="top flex-center">
					<text>选择您最擅长的合约，并在24小时内交易获利</text>
				</view>
				<view class="list">
					<text>USDT</text>
					<view class="flex">
						<block>
							<view class="item active">USDT</view>
						</block>

					</view>
				</view>
				<view class="list">
					<text>币本位合约</text>
					<view class="flex">
						<block v-for="(item,index) in level" :key="index">
							<view class="item" :class="{active:levelIndex == index}" @click="levelIndex = index">
								{{item}}
							</view>
						</block>

					</view>
				</view>
				<view class="flex-between btns">
					<view class="reset btn flex-center" @click="closePopup">取消</view>
					<view class="confirm btn flex-center" @click="confirmPopup">立即连接</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: true,
				level: ['BTC', 'LTC', 'ETH', 'ETC','XRP','EOS','BCH','TRX','BSV'],
				levelIndex: -1,
			};
		},
		methods: {
			goPage() {
				// uni.navigateTo({
				// 	url:""
				// })
			},
			// 关闭筛选弹框
			closePopup() {
				uni.showTabBar();
				this.showPopup = false;
				this.levelIndex = -1;
			},
			// 筛选弹框确定
			confirmPopup() {
				// 进行筛选
				uni.navigateTo({
					url:"/pages/net/status"
				})
			
				// 筛选之后
				this.closePopup()
			}
		}
	}
</script>

<style lang="less">
	page {
		background: white;
	}

	@color: #d4237a;

	.settleOne {
		padding: 30rpx;

		.settle-box {
			.h3 {
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 15rpx;
			}

			.p {
				font-size: 20rpx;
				color: #999;
			}

			.list {
				line-height: 1.5;
				margin: 50rpx 0 80rpx;
			}

			button {
				height: 80rpx;
				background: @color;
				color: #fff;
				font-size: 26rpx;
				border-radius: 40rpx;
			}
		}

		.popup {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, .5);
			z-index: 10;
			align-items: flex-end;

			.box {
				width: 100vw;
				background: white;
				border-radius: 20rpx 20rpx 0 0;
				padding: 30rpx 20rpx;

				.top {
					margin-bottom: 15rpx;

					text {
						font-size: 26rpx;
						color:#999;
					}
				}

				.list {
					padding: 15rpx 0;

					text {
						font-size: 32rpx;

					}

					&>view {
						margin-top: 15rpx;
						flex-wrap: wrap;
					}

					.item {
						width: 150rpx;
						line-height: 2;
						text-align: center;
						border: 1px solid #ddd;
						box-sizing: border-box;
						margin-right: 30rpx;
						font-size: 28rpx;
						border-radius: 30rpx;
						margin-bottom: 20rpx;
						&:nth-child(4n) {
							margin-right: 0;
						}

						&.active {
							background: @color;
							color: #fff;
						}
					}
				}

				.btns {
					margin-top: 30rpx;

					.btn {
						width: 48%;
						height: 80rpx;
						border-radius: 40rpx;
						background: #eee;
						font-size: 30rpx;
						font-weight: bold;

						&.confirm {
							background: @color;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
